<template>
  <div>
    <div class="demo-inner-divider">提示框类型</div>
    <div class="row" >
      <e-button @click="instance('info')">通知</e-button>
      <e-button @click="instance('success')">成功</e-button>
      <e-button @click="instance('warning')">警告</e-button>
      <e-button @click="instance('error')">错误</e-button>
    </div>
    <div class="demo-inner-divider">普通对话框</div>
    <div class="row" >
      <e-button @click="visible = true">普通对话框</e-button>
    </div>
    <div class="demo-inner-divider">自定义</div>
    <div class="row" >
      <e-button @click="selfClick">自定义</e-button>
    </div>
    <!-- 普通弹框 -->
    <div class="row" >
      <e-modal
        v-model="visible"
        title="Common Modal dialog box title"
        @on-cancel="onOk"
        @on-ok="onCancel"
      >
        <p>第1行内容</p>
        <p>第2行内容</p>
        <p>第3行内容</p>
      </e-modal>
    </div>
    <!-- 自定义弹框 -->
    <div class="row" >
      <e-modal
        v-model="selfVisible"
        @on-cancel="onOk"
        @on-ok="onCancel"
      >
        <template #close>
          <e-icon :type="'close'"></e-icon>
        </template>
        <template #header>
          <div>我是自定义title（使用header插槽）</div>
        </template>
        <template #footer>
          <div>我是自定义footer（使用footer插槽）</div>
        </template>
      </e-modal>
    </div>
    <div class="demo-inner-divider">异步关闭</div>
    <div class="row" >
      <e-button @click="async">异步关闭对话框</e-button>
    </div>
    
    <modal-md  class="markdown-body"></modal-md>
  </div>
</template>
<script>
import modalMd from '../../docs/modal.md';

export default {
  components: { modalMd },
  data() {
    return {
      value: '',
      visible: false,
      selfVisible: false
    }
  },
  methods: {
    instance(type) {
      const title = '提示'
      const content = '<p>Content of dialog</p><p>Content of dialog</p>'
      switch (type) {
      case 'info':
        this.$Modal.info({
          title: title,
          content: content,
          onOk: () => {
            // this.$Message.info('Clicked ok')
          },
        })
        break
      case 'success':
        this.$Modal.success({
          title: title,
          content: content,
        })
        break
      case 'warning':
        this.$Modal.warning({
          title: title,
          content: content,
        })
        break
      case 'error':
        this.$Modal.error({
          title: title,
          content: content,
        })
        break
      }
    },
    confirm() {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>Content of dialog</p><p>Content of dialog</p>',
        onOk: () => {
          // this.$Message.info('Clicked ok')
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel')
        },
      })
    },
    async() {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>点击关闭，2秒后自动关闭对话框</p>',
        loading: true,
        onOk: () => {
          setTimeout(() => {
            this.$Modal.remove()
            // this.$Message.info('Asynchronously close the dialog box')
          }, 2000)
        },
      })
    },
    handleRender() {
      this.$Modal.confirm({
        render: (h) => {
          return h(HALOE.Input, {
            modelValue: this.value,
            autofocus: true,
            placeholder: '这是自定义元素提示',
            'onUpdate:modelValue': (val) => (this.value = val),
          })
        },
      })
    },
    selfClick () {
      this.selfVisible = true
    },
    onOk () {
      // TODO on confirm
    },
    onCancel () {
      // TODO when cancel
    }
  },
}
</script>
<style scoped>
  .row {
    margin: 20px 0;
  }
  </style>
  